<link href="../../static/css/jeDate-test.css" rel="stylesheet" th:href="@{/css/jeDate-test.css}"/>
<link href="../../static/css/jedate.css" rel="stylesheet" th:href="@{/css/jedate.css}"/>
<script src="../../static/js/jquery.jedate.js" th:src="@{/js/jquery.jedate.js}"></script>
<script src="../../static/js/jedate-test.js" th:src="@{/js/jedate-test.js}"></script>
<script type="text/javascript" src="../../static/js/prompt.js" th:src="@{/js/prompt.js}"></script>
<script type="text/javascript" src="../../static/muban/muban.xls" th:src="@{/muban/muban.xls}"></script>
<div class="panel panel-default">
    <div class="panel-heading">

        <h4 class="panel-title">游客信息</h4>
    </div>
    <form id="findForm" autocomplete=off>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">身份证</label>
                        <input type="text" th:value="${identityId}" id="identityId" name="identityId" class="form-control"
                               autocomplete=off>
                    </div>
                </div><!-- col-sm-6 -->
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">姓名</label>
                        <input type="text" th:value="${name}" id="name" name="name" class="form-control" autocomplete=off>
                    </div>
                </div><!-- col-sm-6 -->
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">性别</label>
                        <select class="form-control" name="sex"
                                id="politicalStatus" autocomplete=off>
                            <option value="">--请选择--</option>
                            <option th:selected="${sex eq '1'}" value="1">男</option>
                            <option th:selected="${sex eq '2'}" value="2">女</option>
                        </select>
                    </div>
                </div><!-- col-sm-6 -->
            </div><!-- row -->
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">民族</label>
                        <input type="text" th:value="${nation}" id="nation" name="nation" class="form-control" autocomplete=off>
                    </div>
                </div><!-- col-sm-6 -->
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label">年龄</label>
                        <input type="text" th:value="${minAge}"
                               onkeyup="value=value.replace(/[^\d]/g,'')" id="minAge"
                               name="minAge" class="form-control" autocomplete=off>
                    </div>
                </div><!-- col-sm-6 -->
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" style="opacity: 0">年龄</label>
                        <input type="text" th:value="${maxAge}"
                               onkeyup="value=value.replace(/[^\d]/g,'')"
                               id="maxAge" name="maxAge" class="form-control" autocomplete=off>
                    </div>
                </div><!-- col-sm-6 -->
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">住址</label>
                        <input class="form-control" th:value="${address}"  id="address" name="address" autocomplete="off"/>
                    </div>
                </div>
            </div><!-- row -->
            <div class="row">

                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label">最近到馆时间</label>
                        <input class="form-control" name="minRecentDate" id="time5" placeholder="YYYY-MM-DD"
                               th:value="${minRecentDate}" autocomplete="off"/>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" style="opacity: 0">最近到馆时间</label>
                        <input class="form-control" name="maxRecentDate" id="time51" placeholder="YYYY-MM-DD"
                               th:value="${maxRecentDate}" autocomplete="off"/>
                    </div>
                </div>
                <div class="form-group col-md-12">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary pull-right" onclick="find()"
                                style="margin-left: 10px">查询
                        </button>
                        <button type="button" class="btn btn-primary pull-right" data-toggle="modal"
                                data-target=".bs-example-modal-lg" style="margin-left: 10px">导入
                        </button>
                        <button type="button" class="btn btn-primary pull-right" onclick="getExcel()" style="margin-left: 10px">导出
                        </button>
                        <a href="../static/muban/mubandao.xls" th:href="@{/muban/mubandao.xls}" download="muban" class="btn btn-primary pull-right"
                           style="margin-left: 10px" id="excelForm">下载模板
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="panel panel-default">
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover mb30">
                <thead>
                <tr>
                    <th class="column-title">身份证</th>
                    <th class="column-title">姓名</th>
                    <th class="column-title">性别</th>
                    <th class="column-title">民族</th>
                    <th class="column-title">出生</th>
                    <th class="column-title">住址</th>
                    <th class="column-title">最近到馆时间</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="data,iterStat : ${datas.content}">
                    <td th:text="${data.identityId}">Mark</td>
                    <td th:text="${data.name}">Otto</td>
                    <!--Sure改动 sex 三目 -->
                    <td th:text="${data.sex eq '1' ?'男':'女'}"></td>
                    <td th:text="${data.nation}">Mark</td>
                    <td th:text="${#dates.format(data.dateOfBirth,'yyyy-MM-dd')}">Otto</td>
                    <td th:text="${data.address}">@mdo</td>
                    <td th:text="${#strings.substring(data.recentDate,0,19)}">Otto</td>
                </tr>
                </tbody>
            </table>

            <div id="pagination" class="col-md-12 pagination" th:replace="pagination :: pagination">
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                <h4 class="modal-title">导入</h4>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" method="post">
                    <div class="form-group">
                        <input type="file" name="uploadFile" id="uploadFile" class="file" multiple
                               data-min-file-count="1"/>
                        <!--<input type="hidden" id="literatureImg" name="literatureImg"/>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->

                        <!--<input name="uploadFile" id="uploadFile" class="file" type="file" value="添加图片" multiple-->
                        <!--data-min-file-count="1">-->
                        <button type="button" onclick="excel()" class="btn btn-primary pull-right">导入</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" th:inline="javascript">
    $("#uploadFile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getImgFileName", //上传的地址
        allowedFileExtensions: ['xls', 'xlsx'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
//        $("#literatureImg").val(data.response);
    });
    function getExcel() {// identityId，name，sex，nation，minAge，maxAge，address，time5，time51
        var identityId = $("#identityId").val();
        var name =  $("#name").val();
        var sex = $("#politicalStatus").val();
        var nation = $("#nation").val();
        var minAge = $("#minAge").val();
        var maxAge = $("#maxAge").val();
        var address = $("#address").val();
        var time5 = $("#time5").val();
        var time51 = $("#time51").val();
        console.log(identityId,name,sex,minAge,maxAge,address,time5,time51);
        window.location.href = 'identity/exportExcel?identityId=' + identityId + '&name=' + name + '&sex=' + sex + '&nation=' + nation + '&maxAge=' + maxAge + '&minAge=' + minAge + '&address=' + address + '&minRecentDate=' + time5 + '&maxRecentDate=' + time51;


    }

    //下载模板
    // $("#btn_download").click(function(){
    //     downloadTempl();
    // });
    function download(){
        var url = "identity/downloadExcel";
        window.location.href = url;
    }

    function excel() {
        /*[+    +]*/
        var formData = new FormData();
        var name = $("#uploadFile").val();
        formData.append("uploadFile", $("#uploadFile")[0].files[0]);
        formData.append("name", name);
        var index1 = name.lastIndexOf(".");
        var index2 = name.length;
        var suffix = name.substring(index1 + 1, index2);//后缀名
        if (suffix == "xls" || suffix == "xlsx") {
            $.ajax({
                url: 'identity/insert',
                type: 'POST',
                async: false,
                data: formData,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                beforeSend: function () {
                    console.log("正在进行，请稍候");
                },
                success: function (responseStr) {
                    $("#close").click()
                    var error = "";
                    $(responseStr).each(function (i, v) {
                        error += responseStr[i] + "<br>";
                    })
                    find()
                    $.MsgBox.Alert("提示", error);
                    $(".modal-backdrop").css("display", "none")
                }
            });
        } else {
            $.MsgBox.Alert("提示", "导入模版格式不正确");
        }


    }

    function find() {
        /*[+
         var findForm = $("#findForm").serialize();
         $.goTo("identity/toIdentityList",findForm);
         +]*/
    }

    function up(number) {//分页跳转，上一页
        /*[+
         var findForm = $("#findForm").serialize();
         var number = parseInt(number);
         $.goTo("identity/toIdentityList?page="+number,findForm);
         +]*/
    }

    function next(number) {//分页跳转，下一页
        /*[+
         var findForm = $("#findForm").serialize();
         var number = parseInt(number) + 2;
         $.goTo("identity/toIdentityList?page="+number,findForm);
         +]*/
    }

    function pageTo(page) {
        /*[+
         var number = page;
         var findForm = $("#findForm").serialize();
         $.goTo("identity/toIdentityList?page=" + number,findForm);
         +]*/

    }

</script>